<template>
  <view class="phxx-item-detail no-padding">
    <view class="content-box" style="margin-bottom: 20rpx;">
      <view class="item-name">车辆信息</view>
      <view class="bottom block-back">
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>车牌号</view>

          <input :maxlength="8" class="uni-input" placeholder="请输入车牌号" v-model="inputObj.driverCarBrand" />
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>司机姓名</view>
          <input :maxlength="16" class="uni-input" placeholder="请输入姓名" v-model="inputObj.driverName" />
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>身份证号</view>
          <input :maxlength="18" class="uni-input" placeholder="必须真实，否则无法装煤" v-model="inputObj.driverCarCard" />
        </view>
      </view>
    </view>
    <view class="content-box">
      <view class="item-name">货主信息</view>
      <view class="bottom block-back">
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>货主名称</view>
          <view class="uni-select-box" @click="clickCusnameFun">
            <view v-if="!cusName" class="placeholder">请选择客户</view>
            <view class="contns-select" v-else>{{cusName}}</view>
            <uni-icons type="forward" size="20"></uni-icons>
          </view>
        </view>
        <view class="uni-form-item" v-if="orgShow && !!orgaName">
          <view class="title">所属组织</view>
          <view class="uni-select-box">
            <view class="contns-select">{{orgaName || ''}}</view>
          </view>
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>煤种</view>
          <view class="uni-select-box" @click="chooseSelect(1)">
            <view v-if="!proName" class="placeholder">请选择煤种</view>
            <view class="contns-select" v-else>{{proName}}</view>
            <uni-icons type="forward" size="20"></uni-icons>
          </view>
        </view>

        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>卸货地址</view>
          <view class="uni-select-box" @click="chooseSelect(2)">
            <view v-if="!cusAdress" class="placeholder">请选择卸货地址</view>
            <view class="contns-select" v-else>{{cusAdress}}</view>
            <uni-icons type="forward" size="20"></uni-icons>
          </view>
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>开始时间</view>
          <w-picker :visible="isStart" class="disab-box" mode="date" startYear="1900" endYear="2124" :current="false"
            fields="second" @confirm="onConfirm($event,'effectStartTime')" @cancel="onCancel" :disabled-after="false"
            ref="date1"></w-picker>
          <input v-model="inputObj.effectStartTime" class="uni-input prd-mess" placeholder="请选择开始生效时间" disabled="true"
            @click="isStart=true"></input>
        </view>
        <view class="uni-form-item">
          <view class="title"><span style="color: red">*</span>结束时间</view>
          <w-picker :visible="isEnd" class="disab-box" mode="date" startYear="1900" endYear="2124" :current="false"
            fields="second" @confirm="onConfirm($event,'effectEndTime')" @cancel="onCancel" :disabled-after="false"
            ref="date1"></w-picker>
          <input v-model="inputObj.effectEndTime" class="uni-input prd-mess" placeholder="请选择结束生效时间" disabled="true"
            @click="isEnd=true"></input>
        </view>
      </view>
    </view>
    <view class="button-btn-box">
      <button class="button-hover" @click="handleSave" type="primary">
        确定
      </button>
    </view>
    <select-search :show="isAttribute" :title="'选择客户'" :type="'radio'" :showSearch="false" :name="'cusName'"
      :value="'cusId'" :dataLists="attributes" @cancel="isAttribute=false" @submit="submitPop"></select-search>

    <select-search :show="isShowCoal" :title="'选择煤种'" :type="'radio'" :showSearch="false" :name="'proName'"
      :value="'proId'" :dataLists="coalLists" @cancel="isShowCoal=false" @submit="submitCoal"></select-search>

    <select-search :show="isShowUnload" :title="'选择卸货地'" :type="'radio'" :showSearch="false" :name="'cusAddress'"
      :value="'id'" :dataLists="unloadingLists" @cancel="isShowUnload=false" @submit="submitUnload"></select-search>
    <tip-box :show="showTip" :message="tipContent" :duration="3000" @showTip="showTip=false"></tip-box>
  </view>
</template>
<script>
  import { toast, getDateFormat } from '@/utils/common';
  import { getBasisDeploy } from "@/api/system/user.js"
  import { getTenantId } from '@/utils/auth';
  import { getCoalCustomer } from "@/api/sale"
  import { findProCusRelName, findcusAddressbyCusId } from '@/api/tranplan.js';
  import { getDictList } from '@/api/login';
  import { createOne } from '@/api/whiteList';
  export default {
    data() {
      return {
        isStart: false,
        orgShow: false,
        isEnd: false,
        orgaNameShow: true,
        orgaName: '',
        disabledCus: false,
        isAttribute: false,
        isShowCoal: false,
        isShowUnload: false,
        isLoading: false,
        attributes: [],
        coalLists: [],
        unloadingLists: [],
        inputObj: {
          proId: undefined,
          cusId: undefined,
          addressId: undefined,
          driverCarBrand: undefined,
          driverName: undefined,
          driverCarCard: undefined,
          effectStartTime: '',
          effectEndTime: '',
        },
        showTip: false,
        tipContent: '',
        oneHour: 60 * 60 * 1000,
        cusName: '',
        proName: '',
        cusAdress: ''
      };
    },
    computed: {
    },
    mounted() {
      this.getDictLists();
    },
    async onShow() {
      let res = await getBasisDeploy(getTenantId())
      if (res.code == 200) {
        this.orgShow = res?.data?.isEnabledOrganization === 1 ? true : false
      }
    },
    methods: {
      clickCusnameFun() {
        if (!this.disabledCus) {
          this.isAttribute = true
        }
      },
      chooseSelect(type) {
        if (!this.cusName) {
          toast('请先选择客户');
          return
        }
        if (type === 1) this.isShowCoal = true
        else this.isShowUnload = true
      },
      async getDictLists() {
        this.disabledCus = false
        const res = await getCoalCustomer();
        if (res.code === 0) {
          this.attributes = res.data || []
          if (this.attributes.length === 1) {
            this.disabledCus = true
            this.submitPop(this.attributes[0])
          }
        }
      },
      onConfirm(value, type) {
        this.inputObj[type] = value.result
        this.isStart = false
        this.isEnd = false
      },
      onCancel() {
        this.isStart = false
        this.isEnd = false
      },
      cancelPop() {
        this.isAttribute = false
      },
      submitCoal(data) {
        this.proName = data.proName
        this.inputObj.proId = data.proId
        this.isShowCoal = false
      },
      submitUnload(data) {
        this.cusAdress = data.cusAddress
        this.inputObj.addressId = data.id
        this.isShowUnload = false
      },
      async submitPop(data) {
        this.orgaName = data.organizationName
        this.cusName = data.cusName
        this.inputObj.cusId = data.cusId
        this.isAttribute = false
        const resp = await findProCusRelName({ cusId: data.cusId })
        if (resp.code === 0) {
          this.coalLists = resp.data || []
        }
        const resps = await findcusAddressbyCusId({ cusId: data.cusId })
        if (resps.code === 0) {
          this.unloadingLists = resps.data || []
        }
        this.proName = ''
        this.inputObj.proId = undefined
        this.cusAdress = ''
        this.inputObj.addressId = undefined
      },
      async handleSave() {
        if (!this.inputObj.driverCarBrand) {
          toast('请输入车牌号');
          return
        }


        if (!this.inputObj.driverName) {
          toast('请输入司机姓名');
          return
        }
        if (!this.inputObj.driverCarCard) {
          toast('请输入身份证号');
          return
        }
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test(this.inputObj.driverCarCard) === false) {
          toast('身份证输入不合法');
          return;
        }
        if (!this.inputObj.cusId) {
          toast('请选择客户');
          return
        }
        if (!this.inputObj.proId) {
          toast('请选择煤种');
          return
        }
        if (!this.inputObj.addressId) {
          toast('请选择卸货地址');
          return
        }
        if (!this.inputObj.effectStartTime) {
          toast('请选择开始时间');
          return
        }
        if (!this.inputObj.effectEndTime) {
          toast('请选择结束时间');
          return
        }
        const data = { ...this.inputObj }
        const effectStartTime = this.getTimeStamp(`${data.effectStartTime}`);
        const effectEndTime = this.getTimeStamp(`${data.effectEndTime}`)
        if (this.inputObj.effectStartTime || this.inputObj.effectEndTime) {
          if (effectEndTime - effectStartTime < 0) {
            this.showTip = true
            this.tipContent = '结束时间必须晚于开始时间'
            return
          }
        }
        if (this.isLoading) return;
        this.isLoading = true;
        const res = await createOne(this.inputObj);
        if (res.code === 0) {
          toast('新增成功');
          uni.navigateBack({
            url: '/packageA/pages/whiteList/index'
          });
        } else {
          toast(res.msg);
        }
        this.isLoading = false;
      },
      getAttributesParams() {
        return this.inputObj.attributes.map(e => {
          return {
            attribute: e.value,
            name: e.value === '0' ? this.inputObj.carBrand : this.inputObj.IDCard
          }
        })
      },
      getTimeStamp(value) {
        return new Date(value).getTime()
      }
    },
  };
</script>
<style lang="scss" scoped>
  .content-box {
    margin: 20rpx;
  }

  .btn-bottom {
    position: fixed;
    display: flex;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90px;
    padding: 0 15px;
    background-color: #fff;

    button {
      width: calc(100% - 30px);
      height: 45px !important;
      line-height: 45px !important;
    }
  }

  .item-name {
    color: #333;
    font-size: 34rpx;
    padding: 0 0 6rpx 0;
    font-weight: 600;
  }

  .placeholder {
    padding-left: 10rpx;
    color: #808080;
  }
</style>